<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/global.css">
    <link rel="stylesheet" href="./fonts/iconfont.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/media.css">
</head>
<body>
    <!-- header start -->
    <header class="header">
        <div class="header-content">
            <a href="#" class="logo"><img src="./images/logo.png" alt=""></a>
            <span class="icon-nav xxlg-hide sm-show" id="J_nav"><img src="./images/nav.png" alt=""></span>
            <ul class="xxlg-flex sm-hide" id="J_nav_list">
                <li><a href="#">概况</a></li>
                <li><a href="#">教务</a></li>
                <li><a href="#">营销</a></li>
                <li><a href="#">运营</a></li>
                <li><a href="#">用户</a></li>
                <li><a href="#">交易</a></li>
            </ul>
        </div>
    </header>
    <!-- header end -->

    <!-- menu start -->
    <nav class="menu" id="J_menu">
        <div class="menu-item">
            <div class="menu-item-title">
                <span class="icon-menu iconfont icon-jiaoxuepingjia"></span>
                教学管理
            </div>
            <ul>
                <li><a href="#">班级管理</a></li>
                <li><a href="#">直播管理</a></li>
                <li><a href="#">课程管理</a></li>
                <li><a href="#">题库管理</a></li>
                <li><a href="#">分类管理</a></li>
            </ul>
        </div>
        <div class="menu-item">
            <div class="menu-item-title">
                <span class="icon-menu iconfont icon-ren1"></span>
                助学管理
            </div>
            <ul>
                <li><a href="#">班级管理</a></li>
                <li><a href="#">直播管理</a></li>
                <li><a href="#">课程管理</a></li>
                <li><a href="#">题库管理</a></li>
                <li><a href="#">分类管理</a></li>
            </ul>
        </div>
        <div class="menu-item">
            <div class="menu-item-title">
                <span class="icon-menu iconfont icon-yingxiao"></span>
                营销管理
            </div>
            <ul>
                <li><a href="#">班级管理</a></li>
                <li><a href="#">直播管理</a></li>
                <li><a href="#">课程管理</a></li>
                <li><a href="#">题库管理</a></li>
                <li><a href="#">分类管理</a></li>
            </ul>
        </div>
        <div class="menu-item">
            <div class="menu-item-title">
                <span class="icon-menu iconfont icon-ren"></span>
                订单管理
            </div>
            <ul>
                <li><a href="#">班级管理</a></li>
                <li><a href="#">直播管理</a></li>
                <li><a href="#">课程管理</a></li>
                <li><a href="#">题库管理</a></li>
                <li><a href="#">分类管理</a></li>
            </ul>
        </div>
        <div class="menu-item">
            <div class="menu-item-title">
                <span class="icon-menu iconfont icon-a-dingdanyichenggong"></span>
                数据分析
            </div>
            <ul>
                <li><a href="#">班级管理</a></li>
                <li><a href="#">直播管理</a></li>
                <li><a href="#">课程管理</a></li>
                <li><a href="#">题库管理</a></li>
                <li><a href="#">分类管理</a></li>
            </ul>
        </div>
        <div class="menu-item">
            <div class="menu-item-title">
                <span class="icon-menu iconfont icon-fapiao"></span>
                运营
            </div>
            <ul>
                <li><a href="#">班级管理</a></li>
                <li><a href="#">直播管理</a></li>
                <li><a href="#">课程管理</a></li>
                <li><a href="#">题库管理</a></li>
                <li><a href="#">分类管理</a></li>
            </ul>
        </div>
        <div class="menu-item">
            <div class="menu-item-title">
                <span class="icon-menu iconfont icon-daichuli"></span>
                渠道管理
            </div>
            <ul>
                <li><a href="#">班级管理</a></li>
                <li><a href="#">直播管理</a></li>
                <li><a href="#">课程管理</a></li>
                <li><a href="#">题库管理</a></li>
                <li><a href="#">分类管理</a></li>
            </ul>
        </div>
        <button id="button" class="xxlg-hide xlg-show">开关</button>
    </nav>
    <!-- menu start -->

    <!-- main start -->
    <main class="main">
        <div class="main-row">
            <div class="col col-gap col-xxlg-3 col-lg-6 col-sm-12">
                <div class="col-content main-row1">
                    <div class="col-1-title">最新学员</div>
                    <div class="col-1-content"><p>最后一周数据</p><span>688</span></div>
                    <a href="#" class="col-1-a">查看详情</a>
                </div>
            </div>
            <div class="col col-gap col-sm-gap col-xxlg-3 col-lg-6 col-sm-12">
                <div class="col-content main-row1">
                    <div class="col-1-title">订单</div>
                    <div class="col-1-content"><p>未支付订单</p><span>11</span></div>
                    <a href="#" class="col-1-a">查看详情</a>
                </div>
            </div>
            <div class="col col-gap col-gap2 col-xxlg-3 col-lg-6 col-sm-12">
                <div class="col-content main-row1">
                    <div class="col-1-title">当月利润</div>
                    <div class="col-1-content"><p>截至到昨天</p><span>68596</span></div>
                    <a href="#" class="col-1-a">查看详情</a>
                </div>
            </div>
            <div class="col col-gap col-gap2 col-xxlg-3 col-lg-6 col-sm-12">
                <div class="col-content main-row1">
                    <div class="col-1-title">快到期学员</div>
                    <div class="col-1-content"><p>最后一周数据</p><span>852</span></div>
                    <a href="#" class="col-1-a">查看详情</a>
                </div>
            </div>
        </div>
        <div class="main-row">
            <div class="col col-xxlg-8 col-md-12">
                <div class="col-content main-row2">
                    <div class="col-2-title">最新报名学员</div>
                    <table>
                        <colgroup>
                            <col span="1" class="col-grounp1">
                            <col span="1" class="col-grounp2">
                            <col span="1" class="col-grounp3">
                            <col span="1" class="col-grounp4">
                            <col span="1" class="col-grounp5">
                        </colgroup>
                        <thead class="col-2-thead">
                            <tr>
                                <th>顾客</th>
                                <th>产品</th>
                                <th>发票</th>
                                <th>价格</th>
                                <th>状态</th>
                            </tr>
                        </thead>
                        <tbody class="col-2-tbody">
                            <tr>
                                <th><img src="./images/tx1.png" alt="">张三</th>
                                <td>web前端体系课程，是目前...</td>
                                <td>已开</td>
                                <td>6888</td>
                                <td>已发货</td>
                            </tr>
                            <tr>
                                <th><img src="./images/tx2.png" alt="">李四</th>
                                <td>web前端0基础到实战</td>
                                <td>已开</td>
                                <td>6888</td>
                                <td>已发货</td>
                            </tr>
                            <tr>
                                <th><img src="./images/tx1.png" alt="">小丽</th>
                                <td>JavaScript系列课程</td>
                                <td>已开</td>
                                <td>6888</td>
                                <td>已发货</td>
                            </tr>
                            <tr>
                                <th><img src="./images/tx1.png" alt="">小红</th>
                                <td>css 6大主流布局</td>
                                <td>已开</td>
                                <td>6888</td>
                                <td>已发货</td>
                            </tr>
                            <tr>
                                <th><img src="./images/tx1.png" alt="">八戒</th>
                                <td>移动WebApp开发课程</td>
                                <td>已开</td>
                                <td>6888</td>
                                <td>已发货</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="col col-xxlg-4 col-md-12">
                <div class="col-content main-row2">
                    <div class="col-2-title">热门课程</div>
                    <ul class="commen">
                        <li><a href="#">
                            <div class="commen-l" style="background-color: #F0F2FF;"><img src="./images/css.png" alt=""></div>
                            <div class="commen-r">   
                                <p class="commen-r-t">css 6大主流布局技术</p>
                                <p class="commen-r-b">报名人:12344</p>
                            </div>
                        </a></li>
                        <li><a href="#">
                            <div class="commen-l" style="background-color: #EFE8FF;"><img src="./images/js.png" alt=""></div>
                            <div class="commen-r">   
                                <p class="commen-r-t">Javascript基础入门到实战</p>
                                <p class="commen-r-b">报名人:166344</p>
                            </div>
                        </a></li>
                        <li><a href="#">
                            <div class="commen-l" style="background-color: #FAD7DD;"><img src="./images/vuejs.png" alt=""></div>
                            <div class="commen-r">   
                                <p class="commen-r-t">Vue基础到实战</p>
                                <p class="commen-r-b">报名人:34432</p>
                            </div>
                        </a></li>
                        <li><a href="#">
                            <div class="commen-l" style="background-color: #FFF5E0;"><img src="./images/react.png" alt=""></div>
                            <div class="commen-r">   
                                <p class="commen-r-t">React入门到精通</p>
                                <p class="commen-r-b">报名人:4222</p>
                            </div>
                        </a></li>
                        <li><a href="#">
                            <div class="commen-l" style="background-color: #EFE8FF;"><img src="./images/phone.png" alt=""></div>
                            <div class="commen-r">   
                                <p class="commen-r-t">移动端WebAPP开发</p>
                                <p class="commen-r-b">报名人:2333</p>
                            </div>
                        </a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="main-row">
            <div class="col col-xxlg-4 col-sm-12">
                <div class="col-content main-row3">
                    <div class="col-3-l-title">站长公告</div>
                    <div class="col-3-img"><img src="./images/gg.png" alt=""></div>
                    <div class="col-3-l-content">艾编程是在大数据人工智能时代高速发展的今天成立的一家以提 供各行业商业项目研发解决方案为核心的在线学习平台。</div>
                </div>
            </div>
            <div class="col col-xxlg-8 col-sm-12">
                <div class="col-content main-row3">
                    <div class="col-3-r-title">常用入口</div>
                    <ul>
                        <li><a href="#"><i style="background-color: #F0F2FF;"><img src="./images/enter1.png" alt=""></i>课程管理</a></li>
                        <li><a href="#"><i style="background-color: #EFE8FF;"><img src="./images/enter2.png" alt=""></i>班级管理</a></li>
                        <li><a href="#"><i style="background-color: #FAD7DD;"><img src="./images/enter3.png" alt=""></i>优惠劵</a></li>
                        <li><a href="#"><i style="background-color: #FFF5E0;"><img src="./images/enter4.png" alt=""></i>会员管理</a></li>
                        <li><a href="#"><i style="background-color: #EFE8FF;"><img src="./images/enter5.png" alt=""></i>web装修</a></li>
                        <li><a href="#"><i style="background-color: #FBDFE4;"><img src="./images/enter6.png" alt=""></i>用户管理</a></li>
                        <li><a href="#"><i style="background-color: #FFF5E0;"><img src="./images/enter7.png" alt=""></i>商品订单</a></li>
                        <li><a href="#"><i style="background-color: #F0F2FF;"><img src="./images/enter8.png" alt=""></i>公开课</a></li>
                    </ul>
                </div>
            </div>
        </div>  
        <div class="main-row">
            <div class="col col-xxlg-4 col-md-6 col-sm-12"><div class="col-content main-row4">
                <div class="col-4-title">课程交易金额</div>
                    <ul class="commen">
                        <li><a href="#">
                            <div class="commen-l" style="background-color: #F0F2FF;"><img src="./images/css.png" alt=""></div>
                            <div class="commen-r">   
                                <p class="commen-r-t">css 6大主流布局技术</p>
                                <p class="commen-r-b">$12344</p>
                            </div>
                        </a></li>
                        <li><a href="#">
                            <div class="commen-l" style="background-color: #EFE8FF;"><img src="./images/js.png" alt=""></div>
                            <div class="commen-r">   
                                <p class="commen-r-t">Javascript基础入门到实战</p>
                                <p class="commen-r-b">$166344</p>
                            </div>
                        </a></li>
                        <li><a href="#">
                            <div class="commen-l" style="background-color: #FAD7DD;"><img src="./images/vuejs.png" alt=""></div>
                            <div class="commen-r">   
                                <p class="commen-r-t">Vue基础到实战</p>
                                <p class="commen-r-b">$34432.00</p>
                            </div>
                        </a></li>
                        <li><a href="#">
                            <div class="commen-l" style="background-color: #FFF5E0;"><img src="./images/react.png" alt=""></div>
                            <div class="commen-r">   
                                <p class="commen-r-t">React入门到精通</p>
                                <p class="commen-r-b">$4222.00</p>
                            </div>
                        </a></li>
                        <li><a href="#">
                            <div class="commen-l" style="background-color: #EFE8FF;"><img src="./images/phone.png" alt=""></div>
                            <div class="commen-r">   
                                <p class="commen-r-t">移动端WebAPP开发</p>
                                <p class="commen-r-b">$32222.00</p>
                            </div>
                        </a></li>
                    </ul>
            </div></div>
            <div class="col col-xxlg-4 col-md-6 col-sm-12"><div class="col-content main-row4" id="J_chart1"></div></div>
            <div class="col col-xxlg-4 col-md-12"><div class="col-content main-row4" id="J_chart2"></div></div>
        </div>
    </main>
    <!-- main start -->

    <!-- footer start -->
    <footer class="footer"></footer>
    <!-- footer start -->

    <script>
        var nav = document.getElementById("J_nav");
        var navList = document.getElementById("J_nav_list");
        nav.onclick = function(){
            navList.classList.toggle('sm-flex');
        };

        // 左侧菜单
        var menu = document.getElementById("J_menu");
        var menuTitles = document.querySelectorAll("#J_menu .menu-item .menu-item-title");
        var len=menuTitles.length;
        for(var i=0;i<len;i++){
            menuTitles[i].flag = 'hidden';
            menuTitles[i].onclick = function (){
                if(this.flag === 'hidden'){
                    this.classList.add("menu-item-active");
                    var h = this.nextElementSibling.clientHeight;
                    this.parentNode.style.height = h + 40 + 'px';
                    //缩小情况下点击
                    menu.style.width = 260 + 'px';
                    this.flag = 'show';
                }else{
                    this.classList.remove("menu-item-active");
                    this.parentNode.style.height = 40 + 'px';
                    this.flag = 'hidden';
                }
            };
        };
        //开关按钮
        var onOff = document.getElementById("button");
        onOff.onclick = function () {
            var w = menu.clientWidth;
            if(w<100){
                menu.style.width = 260 + 'px';
                
            }else{
                menu.style.width = 75 + 'px';
                for(var i=0;i<len;i++){
                    menuTitles[i].classList.remove("menu-item-active");
                    menuTitles[i].parentNode.style.height = 40 + 'px';
                    menuTitles[i].flag = 'hidden';
                }
            }
        }

        window.addEventListener('resize',function(){
            var w = window.innerWidth;
            // var w = document.documentElement.clientWidth;
            if(w>1400){
                menu.style.width = 260 + 'px';
            }
            if(w <= 1400){
                for(var i = 0;i<len;i++){
                    menuTitles[i].parentNode.style.height = 40 + 'px';
                    menu.style.width = 75 + 'px';
                    menuTitles[i].classList.remove("menu-item-active");
                }
            }
        })
    </script>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.js"></script>
    <script>
        // 基于准备好的dom，初始化echarts实例
        var myChart1 = echarts.init(document.getElementById("J_chart1"));
        var myChart2 = echarts.init(document.getElementById("J_chart2"));
        // 指定图表的配置项和数据
        var option1 = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
                }
            },
            legend: {
                data: ['Email', 'Union Ads', 'Video Ads']
            },
            toolbox: {
                feature: {
                saveAsImage: {}
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                type: 'category',
                boundaryGap: false,
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                }
            ],
            yAxis: [
                {
                type: 'value'
                }
            ],
            series: [
                {
                name: 'Email',
                type: 'line',
                stack: 'Total',
                areaStyle: {},
                emphasis: {
                    focus: 'series'
                },
                data: [120, 132, 101, 134, 90, 230, 210]
                },
                {
                name: 'Union Ads',
                type: 'line',
                stack: 'Total',
                areaStyle: {},
                emphasis: {
                    focus: 'series'
                },
                data: [220, 182, 191, 234, 290, 330, 310]
                },
                {
                name: 'Video Ads',
                type: 'line',
                stack: 'Total',
                areaStyle: {},
                emphasis: {
                    focus: 'series'
                },
                data: [150, 232, 201, 154, 190, 330, 410]
                }
            ]
            };
            var option2 = {
                title: {
                    text: 'Website',
                    subtext: 'Fake Data',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left'
                },
                series: [
                    {
                    name: 'Access From',
                    type: 'pie',
                    radius: '50%',
                    data: [
                        { value: 1048, name: 'Search' },
                        { value: 735, name: 'Direct' },
                        { value: 580, name: 'Email' },
                        { value: 484, name: 'Union' },
                        { value: 300, name: 'Video' }
                    ],
                    emphasis: {
                        itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                    }
                ]
                };
            // 使用刚指定的配置项和数据显示图表。
            myChart1.setOption(option1);
            myChart2.setOption(option2);
            window.addEventListener("resize",function(){
                myChart1.resize();
                myChart2.resize();
            });
    </script>
</body>
</html>